"use client"
import React, {useState} from 'react';
import {Input, Card, Select, message} from 'antd';
import {Button} from "@nextui-org/react";
import {UserOutlined, LockOutlined, MailOutlined, PhoneOutlined, HomeOutlined, BugOutlined} from '@ant-design/icons';
import {useRouter} from 'next/navigation';
import {fetch} from '../../utils/request';
import Link from "next/link";

const SignUp: React.FC = () => {
    const router = useRouter();
    const [messageApi, contextHolder] = message.useMessage();
    // const form = Form.useForm();
    const [formData, setFormData] = useState({
        username: '',
        password: '',
        confirmPassword: '',
        email: '',
        nickname: '',
        phone: '',
        gender: 'male'
    });

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        console.log('e', e.target);
        console.log('formData', formData);
        if (formData.password !== formData.confirmPassword) {
            alert('密码不匹配！');
            return;
        }

        try {
            fetch('api3/auth/register', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
               data: {...formData, userName: formData.username, passWord: formData.password},
            }).then((response: {code: unknown, msg: unknown}) => {
                console.log('注册结果', response);
                if (response && response.code === 200){
                        messageApi.open({
                            type: 'success',
                            content: '注册成功',
                        });
                    router.push('/login');
                } else {
                    messageApi.open({
                        type: 'warning',
                        content: response?.msg,
                    });
                }
            })
            // const response = await fetch('/api3/auth/register', {
            //     method: 'POST',
            //     headers: {
            //         'Content-Type': 'application/json',
            //     },
            //     body: JSON.stringify(formData),
            // });
            // console.log('注册结果', response);
            // if (response.ok) {
            //     router.push('/login');
            // } else {
            //     // alert('注册失败，请重试');
            //     // message.error('注册失败,请重试');
            //     messageApi.open({
            //         type: 'error',
            //         content: '注册失败，请重试',
            //     });
            // }
        } catch (error) {
            console.error('注册错误:', error);
            // alert('注册过程中出现错误');
            // message.error('注册过程中出现错误');
            messageApi.open({
                type: 'error',
                content: '注册过程中出现错误',
            });
        }
    };

    const handleChange = (name: string, value: string) => {
        setFormData(prev => ({
            ...prev,
            [name]: value
        }));
    };

    return (
        <div
            className="min-h-screen flex items-center justify-center bg-gradient-to-tr from-blue-100 via-blue-300 to-blue-500">
            {contextHolder}
            {/* 返回首页按钮 */}
            <Link href="/">
                <div
                    style={{
                        position: 'absolute',
                        top: '2rem',
                        left: '2rem',
                        zIndex: 10,
                        width: '48px',
                        height: '48px',
                        borderRadius: '50%',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        background: 'rgba(255, 255, 255, 0.8)',
                        border: 'none',
                        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
                        transition: 'all 0.3s ease',
                        cursor: 'pointer'
                    }}
                    className="hover:bg-white hover:scale-110"
                >
                    <HomeOutlined style={{fontSize: '20px'}}/>
                </div>
            </Link>
            <div className="w-full max-w-md p-6 space-y-8">
                <Card
                    className="w-[500px] backdrop-blur-md bg-white/90 shadow-xl rounded-2xl border-0"
                    title={
                        <div className="text-center pt-4">
                            <h2 className="text-2xl font-bold text-gray-800">
                                创建账号
                            </h2>
                            <p className="text-gray-500 text-sm mt-2">加入我们，开启新的旅程</p>
                        </div>
                    }
                >
                    <form onSubmit={handleSubmit} className="space-y-6">
                        <div className="space-y-2">
                            <label className="block text-sm font-medium text-gray-700">用户名</label>
                            <Input
                                prefix={<UserOutlined className="text-gray-400"/>}
                                placeholder="请输入用户名"
                                value={formData.username}
                                onChange={(e) => handleChange('username', e.target.value)}
                                required
                                className="rounded-lg"
                                size="large"
                            />
                        </div>

                        <div className="space-y-2">
                            <label className="block text-sm font-medium text-gray-700">密码</label>
                            <Input.Password
                                prefix={<LockOutlined className="text-gray-400"/>}
                                placeholder="请输入密码"
                                value={formData.password}
                                onChange={(e) => handleChange('password', e.target.value)}
                                required
                                className="rounded-lg"
                                size="large"
                            />
                        </div>

                        <div className="space-y-2">
                            <label className="block text-sm font-medium text-gray-700">确认密码</label>
                            <Input.Password
                                prefix={<LockOutlined className="text-gray-400"/>}
                                placeholder="请再次输入密码"
                                value={formData.confirmPassword}
                                onChange={(e) => handleChange('confirmPassword', e.target.value)}
                                required
                                className="rounded-lg"
                                size="large"
                            />
                        </div>

                        <div className="space-y-2">
                            <label className="block text-sm font-medium text-gray-700">昵称</label>
                            <Input
                                prefix={<BugOutlined  className="text-gray-400"/>}
                                placeholder="请输入昵称"
                                type="nickname"
                                value={formData.nickname}
                                onChange={(e) => handleChange('nickname', e.target.value)}
                                required
                                className="rounded-lg"
                                size="large"
                            />
                        </div>

                        <div className="space-y-2">
                            <label className="block text-sm font-medium text-gray-700">邮箱</label>
                            <Input
                                prefix={<MailOutlined className="text-gray-400"/>}
                                placeholder="请输入邮箱"
                                type="email"
                                value={formData.email}
                                onChange={(e) => handleChange('email', e.target.value)}
                                required
                                className="rounded-lg"
                                size="large"
                            />
                        </div>

                        <div className="space-y-2">
                            <label className="block text-sm font-medium text-gray-700">手机号码</label>
                            <Input
                                prefix={<PhoneOutlined className="text-gray-400"/>}
                                placeholder="请输入手机号码"
                                value={formData.phone}
                                onChange={(e) => handleChange('phone', e.target.value)}
                                required
                                className="rounded-lg"
                                size="large"
                            />
                        </div>

                        <div className="space-y-2">
                            <label className="block text-sm font-medium text-gray-700">性别</label>
                            <Select
                                size="large"
                                style={{width: '100%'}}
                                placeholder="请选择性别"
                                value={formData.gender}
                                onChange={(value) => handleChange('gender', value)}
                                options={[
                                    {value: 'male', label: '男'},
                                    {value: 'female', label: '女'},
                                    {value: 'other', label: '其他'}
                                ]}
                                className="rounded-lg"
                            />
                        </div>

                        <Button
                            size="lg"
                            // variant="bordered"
                            className="w-full"
                            color="primary"
                            type="submit"
                            // size="large"
                            // block
                            // className="mt-8 h-12 bg-blue-500 hover:bg-blue-600 rounded-lg font-medium text-lg transition-all duration-200"
                        >
                            立即注册
                        </Button>

                        <div className="text-center mt-6">
                            <span className="text-gray-600">已有账号？</span>
                            <a
                                className="text-blue-500 ml-2 hover:text-blue-700 cursor-pointer font-medium"
                                onClick={() => router.push('/login')}
                            >
                                立即登录
                            </a>
                        </div>
                    </form>
                </Card>
            </div>
        </div>
    );
};

export default SignUp;
